<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
<h1>表格标签基础语法</h1>
<!-- 表格标签是页面展示大量数据最常用的方式(后续配合分页展示)
通过表格可以有格式 规律的展示数据 是前端页面重要的功能之一
-->
<!-- 基础表格有如下几部分构成
table表格的根标签 用于表示一个表格
thead代表标题标签 用于标题行内容的书写与展示
tbody代表主体标签 用于表格内容的书写与展示
tfoot代表页脚标签 用于表尾内容的书写与展示
tr代表一行
td代表一列
th代表标题列
默认情况下 每列的宽度取决于最长列
-->
<table border="1">
  <thead>
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>张三</td>
    <td>18</td>
  </tr>
  <tr>
    <td>2</td>
    <td>李四</td>
    <td>18</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>合计：</td>
    <td>2</td>
  </tr>
  </tfoot>
</table>

<hr>
<!-- 表格高级语法 跨行跨列语法
通过属性可以让一个单元格占用多行多列多个单元格内容
实现特定表格样式的书写
-->
<table border="1">
  <thead>
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>张三</td>
    <!-- 找到需要跨行的数据 通过rowspan设置跨行数  -->
    <td rowspan="2">18</td>
  </tr>
  <tr>
    <td>2</td>
    <td>李四</td>
    <!-- 注意跨行跨列后会占用对应的位置 对应位置不能再定义单元格了 -->
    <!-- <td>18</td> -->
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>合计：</td>
    <!-- 找到需要跨列的单元格 通过colspan属性设置其跨列数 -->
    <td colspan="2">2</td>
  </tr>
  </tfoot>
</table>

<hr>
<!-- 实现表格方法1 定义指定行与列进行操作 -->
<table border="1">
  <tr>
    <td>姓名</td>
    <td>张三</td>
    <td>专业</td>
    <td>家里蹲</td>
    <td rowspan="2"><img src="../img/ctrl.gif" width="100px"></td>
  </tr>
  <tr>
    <td>出生日期</td>
    <td>2024年4月8日</td>
    <td>练习时长</td>
    <td>2年半</td>

  </tr>
  <tr>
    <td>籍贯</td>
    <td colspan="4">坤村</td>

  </tr>
  <tr>
    <td colspan="5">工作经历</td>

  </tr>
  <tr>
    <td colspan="5">ctrl</td>
  </tr>
</table>
<!-- 方法2 按照每行个数先定义列 之后属性跨行跨列 -->




</body>

</html>